<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible=true;formData={}">添加</el-button>
    <el-table :data="list" border style="width: 100%">

        <el-table-column fixed prop="roleid" label="编号" width="450"/>
      <el-table-column fixed prop="rname" label="角色名" width="410"/>
      <el-table-column fixed prop="remark" label="备注" width="400"/>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="formData.roleid"/>
        </el-form-item>
        <el-form-item label="角色名" :label-width="formLabelWidth">
          <el-input v-model="formData.rname"/>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="formData.remark"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submits()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Role",
  data(){
    return {
      list:[],
      title: '添加角色',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      formData: {}
    }
  },created() {
    this.getList();
  },
    methods: {
        getList() {
            this.$http.post('/role/select').then(res => {
                console.log(111)
                console.log(res);
                this.$data.list = res;
            })

    },
      submits(form){
          this.$http.post("/role/addRole",this.$data.formData).then(res=>{
              console.log(res)
              if (res){
                  this.$message.success("成功");
                  this.getList();
                  this.dialogFormVisible=false;
              }else{
                  this.$message.error("失败");
                  this.dialogFormVisible=false;
              }
          })
      }
  }
}
</script>

<style scoped>

</style>
